<template>
  <div style="display: flex">
    <div style="margin-right: 20px">
      <el-time-select
        v-model="startTime"
        style="width: 240px"
        :max-time="endTime"
        :placeholder="startPlaceholder"
        :start="startTimeStart"
        :step="startStep"
        :end="startTimeEnd"
        v-bind="$attrs.startOptions||{}"
      />
    </div>
    <!-- {{ $attrs }} -->
    <div>
      <el-time-select
        v-model="endTime"
        style="width: 240px"
        :min-time="startTime" 
        :placeholder="endPlaceholder"
        :start="endTimeStart"
        :step="endStep"
        :end="endTimeEnd"
        v-bind="$attrs.endOptions||{}"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
let props = defineProps({
  // 开始时间占位符
  startPlaceholder: {
    type: String,
    default: "请选择开始时间",
  },
  // 结束时间占位符
  endPlaceholder: {
    type: String,
    default: "请选择结束时间",
  },
  // 开始时间 - 开始选择
  startTimeStart: {
    type: String,
    default: "08:00",
  },
  // 开始时间 - 结束选择
  startTimeEnd: {
    type: String,
    default: "24:00",
  },
  // 结束时间 - 开始选择
  endTimeStart: {
    type: String,
    default: "08:00",
  },
  // 结束时间 - 结束选择
  endTimeEnd: {
    type: String,
    default: "24:00",
  },
  // 开始时间步长
  startStep: {
    type: String,
    default: "00:30",
  },
  // 结束时间步长
  endStep: {
    type: String,
    default: "00:30",
  },
});
// 事件监听
let emits = defineEmits(["startChange", "endChange"]);
// 开始时间
let startTime = ref("");
// 结束时间
let endTime = ref("");
// 开始时间变化
watch(
  () => startTime.value,
  val => {
    if (!val) {
      endTime.value = "";
    }else{
      emits("startChange", val);
    }
  },
);
// 结束时间变化
watch(
  () => endTime.value,
  val => {
    if (val) {
        emits("endChange", {
          startTime: startTime.value,
          endTime: val,
        });
    }
  },
);
</script>

<style scoped lang="scss"></style>
